<template>
	<div>
		<picker :value="defaultselector" v-if="showPicker" mode="multiSelector" :range-key="'label'" @change="confirm"
			@columnchange="columnchange" :range="multiSelector" class="citySty">
			<div style="font-size: 36rpx;color:#9E9E9E;" v-if="loading">{{ $t('加载中') }}...</div>
			<div class="moreSty" style="font-size: 36rpx;color: #0E0E0E;" v-else-if="!loading && text">{{ text }}</div>
			<div style="font-size: 36rpx;color:#9E9E9E;" v-else @click="show = !show">{{ $t('请选择') }}</div>
		</picker>
	</div>
</template>

<script>
export default {
	props: ["text"],
	data() {
		return {
			showPicker: true,
			lang: this.$i18n.locale,
			refresh: 0,
			loading: false,
			defaultselector: [0, 0, 0],
			show: false,
			multiSelector: [
				[],
				[],
				[]
			]
		}
	},
	created() {
		this.getList(0, 0);
	},
	methods: {
		change(e) {
			console.log(e);
		},
		getListFinishFn(data) {
			if (data && data[0]) {
				this.multiSelector[0] = data;
				this.multiSelector[1] = data[0].children;
				this.multiSelector[2] = data[0].children[0].children;
			}
			this.loading = false;

		},
		getList(pid, column) {
			this.loading = true;
			let data = [];
			if (uni.getStorageSync('addressNodes')) {
				data = uni.getStorageSync('addressNodes');
				this.getListFinishFn(data)
				return
			}
			uni.request({
				url: "https://app.gluz.com.cn/api/basic/getSelectCityList",
				data: {
					is_port: true,
					pid,
					lang: this.lang
				},
				success: res => {
					if (!uni.getStorageSync('addressNodes')) {
						uni.setStorageSync('addressNodes', res.data.data)
					}
					data = res.data.data;
					this.getListFinishFn(data);

				}
			})
		},
		confirm(e) {
			const [column1Index, column2Index, column3Index] = e.detail.value;

			if (this.multiSelector[0][column1Index].value == -2) return
			this.$emit("confirm", {
				column1: {
					label: this.multiSelector[0][column1Index].label,
					label_ru: this.multiSelector[0][column1Index].label_ru,
					value: this.multiSelector[0][column1Index].value
				},
				column2: {
					label: this.multiSelector[1][column2Index].label,
					label_ru: this.multiSelector[1][column2Index].label_ru,
					value: this.multiSelector[1][column2Index].value
				},
				column3: {
					label: this.multiSelector[2][column3Index].label,
					label_ru: this.multiSelector[2][column3Index].label_ru,
					value: this.multiSelector[2][column3Index].value
				}
			})
		},
		columnchange(e) {
			const {
				column,
				value: index
			} = e.detail;
			this.defaultselector[column] = index
			if (column === 0) {
				this.multiSelector[column + 1] = this.multiSelector[0][index].children
				this.multiSelector[column + 2] = this.multiSelector[1][0].children
			} else if (column === 1) {
				this.multiSelector[column + 1] = this.multiSelector[1][index].children
			}
		}
	}
}
</script>

<style lang="scss">
	.citySty {
		width: 100%;
		height: 80rpx;
		// border-radius: 18rpx;
		// border: 2rpx solid #D8D8D8;
		line-height: 80rpx;
		text-indent: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.moreSty {
		  white-space: nowrap; /* 禁止换行 */
		  overflow: hidden; /* 隐藏溢出内容 */
		  text-overflow: ellipsis; /* 超出部分显示省略号 */
		  width: 300rpx;
	}
</style>